﻿<!DOCTYPE html>
<html>
  <head>
    <title>Check-in Management</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link href="HotelManagementOS/resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="HotelManagementOS/data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="HotelManagementOS/files/check-in_management/styles.css" type="text/css" rel="stylesheet"/>
    <script src="HotelManagementOS/resources/scripts/jquery-3.2.1.min.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/axQuery.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/globals.js"></script>
    <script src="HotelManagementOS/resources/scripts/axutils.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/annotation.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/axQuery.std.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/doc.js"></script>
    <script src="HotelManagementOS/resources/scripts/messagecenter.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/events.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/recording.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/action.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/expr.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/geometry.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/flyout.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/model.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/repeater.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/sto.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/utils.temp.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/variables.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/drag.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/move.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/visibility.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/style.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/adaptive.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/tree.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/init.temp.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/legacy.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/viewer.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/math.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/jquery.nicescroll.min.js"></script>
    <script src="HotelManagementOS/data/document.js"></script>
    <script src="HotelManagementOS/files/check-in_management/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (矩形) -->
      <div id="u202" class="ax_default box_1">
        <div id="u202_div" class=""></div>
        <div id="u202_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u203" class="ax_default box_3">
        <div id="u203_div" class=""></div>
        <div id="u203_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- 酒店管理系统（标题） (文本框) -->
      <div id="u204" class="ax_default text_field" data-label="酒店管理系统（标题）">
        <div id="u204_div" class=""></div>
        <input id="u204_input" type="text" value="&nbsp;&nbsp; 酒店管理系统" class="u204_input"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u205" class="ax_default box_3">
        <div id="u205_div" class=""></div>
        <div id="u205_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u206" class="ax_default _形状">
        <div id="u206_div" class=""></div>
        <div id="u206_text" class="text ">
          <p><span>&nbsp;&nbsp; &nbsp;&nbsp; 欢迎&nbsp; &nbsp; ▼</span></p>
        </div>
      </div>

      <!-- 下拉菜单 (动态面板) -->
      <div id="u207" class="ax_default ax_default_hidden" data-label="下拉菜单" style="display:none; visibility: hidden">
        <div id="u207_state0" class="panel_state" data-label="State1" style="">
          <div id="u207_state0_content" class="panel_state_content">

            <!-- Unnamed (矩形) -->
            <div id="u208" class="ax_default box_1">
              <div id="u208_div" class=""></div>
              <div id="u208_text" class="text ">
                <p><span>个人中心</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u209" class="ax_default box_1">
        <div id="u209_div" class=""></div>
        <div id="u209_text" class="text ">
          <p><span>用户管理</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u210" class="ax_default box_1">
        <div id="u210_div" class=""></div>
        <div id="u210_text" class="text ">
          <p><span>客房信息管理</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u211" class="ax_default box_1">
        <div id="u211_div" class=""></div>
        <div id="u211_text" class="text ">
          <p><span>房客管理 ▼</span></p><p><span><br></span></p>
        </div>
      </div>

      <!-- 房客管理功能 (动态面板) -->
      <div id="u212" class="ax_default ax_default_hidden" data-label="房客管理功能" style="display:none; visibility: hidden">
        <div id="u212_state0" class="panel_state" data-label="State1" style="">
          <div id="u212_state0_content" class="panel_state_content">

            <!-- Unnamed (矩形) -->
            <div id="u213" class="ax_default box_1">
              <div id="u213_div" class=""></div>
              <div id="u213_text" class="text ">
                <p><span>预定管理</span></p>
              </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u214" class="ax_default box_1">
              <div id="u214_div" class=""></div>
              <div id="u214_text" class="text ">
                <p><span>入住登记管理</span></p>
              </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u215" class="ax_default box_1">
              <div id="u215_div" class=""></div>
              <div id="u215_text" class="text ">
                <p><span>预定转入住</span></p>
              </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u216" class="ax_default box_1">
              <div id="u216_div" class=""></div>
              <div id="u216_text" class="text ">
                <p><span>结账管理</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u217" class="ax_default box_1">
        <div id="u217_div" class=""></div>
        <div id="u217_text" class="text ">
          <p><span>基础信息管理 ▼</span></p><p><span><br></span></p>
        </div>
      </div>

      <!-- 基础信息管理管理功能 (动态面板) -->
      <div id="u218" class="ax_default ax_default_hidden" data-label="基础信息管理管理功能" style="display:none; visibility: hidden">
        <div id="u218_state0" class="panel_state" data-label="State1" style="">
          <div id="u218_state0_content" class="panel_state_content">

            <!-- Unnamed (矩形) -->
            <div id="u219" class="ax_default box_1">
              <div id="u219_div" class=""></div>
              <div id="u219_text" class="text ">
                <p><span>客房类型管理</span></p>
              </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u220" class="ax_default box_1">
              <div id="u220_div" class=""></div>
              <div id="u220_text" class="text ">
                <p><span>楼层管理</span></p>
              </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u221" class="ax_default box_1">
              <div id="u221_div" class=""></div>
              <div id="u221_text" class="text ">
                <p><span>会员管理</span></p>
              </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u222" class="ax_default box_1">
              <div id="u222_div" class=""></div>
              <div id="u222_text" class="text ">
                <p><span>退出登录</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u223" class="ax_default box_1">
        <div id="u223_div" class=""></div>
        <div id="u223_text" class="text ">
          <p><span>回到首页</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u224" class="ax_default box_1">
        <div id="u224_div" class=""></div>
        <div id="u224_text" class="text ">
          <p><span>退出登录</span></p>
        </div>
      </div>

    </div>
    <div style="position:absolute;left: 200px;top: 80px;width: 1200px;">
      <button class="layui-btn layui-btn-sm layui-btn-primary"id="new_btn">新建</button>
      <button class="layui-btn layui-btn-sm layui-btn-primary"id="select">查询</button>
      <table id="checkin" lay-filter="tb_event">

      </table>
    </div>



    <script src="hotel1/resources/scripts/axure/ios.js"></script>
    <script src="resources/scripts/axure/ios.js"></script>
  </body>
  <script src="layui/layui.js"></script>
  <script type="text/html" id="number">
    {{d.LAY_INDEX }}
  </script>
  <script type="text/html" id="mytool">
    <div class="layui-btn-group">
      <button class="layui-btn layui-btn-sm layui-btn-normal"
              lay-event="edit">编辑</button>
      <button class="layui-btn layui-btn-sm layui-btn-danger"
              lay-event="delete">删除</button>
    </div>
  </script>

  <script>
    var $;
    var myReload;
    layui.use(['layer','table','jquery'],function(){
      var table = layui.table;
      $ = layui.jquery;
      var  layer = layui.layer;

      //表格的渲染
      table.render({
        elem:"#checkin",  //渲染表格的id
        url:"getCheckInByPage",//后台数据的请求接口
        cols:[[
          {field:'index',title:"序号",width:80,templet:"#number"},
          {field:'checkInNum',title: "入住号",width:80},
          {field:'roomNum',title:"房间号",width:80},
          {field:'roomType',title:"类型",width:80},
          {field:'isPre',title:"是否预定",width:100},
          {field:'price',title:"房间价格",width:100},
          {field: 'discountPrice',title: "折后价",width: 80},
          {field: 'deposit',title: "押金",width: 80},
          {field: 'userName',title: "用户姓名",width:100},
          {field: 'telephone',title:"电话号码",width: 100},
          {field: 'arrivalTime',title:"到达时间",width: 100},
          {field: 'departTime',title:"离店时间",width: 100},
          {field: 'userCount',title:"用户数量",width: 100},
          {title:"操作",toolbar:"#mytool",width:120}
        ]],
        even:true, //斑马线背景色
        page:true //开启分页组件
      });

      //表格重载  刷新表格用
      myReload = function reloadTable(){
        table.reload('checkin',{page:{curr:1}})
      }

      //工具栏的响应事件
      //tb_event对应18行
      table.on('tool(tb_event)',function (obj) {
        var data = obj.data;
        //edit对应33行
        if(obj.event=='edit'){
          //弹出对话框层
          layer.open({
            type:2,
            area:['600px','450px'],
            fixed:false,  //是否固定
            content:'editcheckin.jsp',
            success:function (layero,index) {
              //往对话框传值
              var body = layer.getChildFrame('body',index);
              body.find("#checkInNum").val(data.checkInNum);
              body.find("#roomNum").val(data.roomNum);
              body.find("#roomType").val(data.roomType);
              body.find("#isPre").val(data.isPre);
              body.find("#price").val(data.price);
              body.find("#discountPrice").val(data.discountPrice);
              body.find("#deposit").val(data.deposit);
              body.find("#userName").val(data.userName);
              body.find("#telephone").val(data.telephone);
              body.find("#arrivalTime").val(data.arrivalTime);
              body.find("#departTime").val(data.departTime);
              body.find("#userCount").val(data.userCount);
            }
          });
        }else if(obj.event=='delete'){

          $.ajax({
            url:"delCheckIn",//请求的后台接口
            type:"post",
            data:{checkInNum:data.checkInNum},
            dataType:"json",
            success:function (param) {
              if(param.code==0){
                //删除成功
                alert(param.msg);
                myReload();
              }else{
                alert(param.msg);
              }
            },
            error:function(){
              alert("操作失败，请稍后重试");
            }
          });
        }
      })

      $("#new_btn").on('click',function () {
        //弹出对话框层
        layer.open({
          type:2,
          area:['600px','450px'],
          fixed:false,
          content:'addcheckin.jsp',
          success:function (layero,index) {

          }
        });
      });

    });

    function updateCheckIn(checkInNum,roomNum,roomType,isPre,price,discountPrice,deposit,userName,telephone,arrivalTime,departTime,userCount) {
      $.ajax({
        url:"updateCheckIn",//请求的后台接口
        type:"post",
        data:{checkInNum:checkInNum,roomNum:roomNum,roomType:roomType,isPre:isPre,price:price,discountPrice:discountPrice,deposit:deposit,userName:userName,telephone:telephone,arrivalTime:arrivalTime,departTime:departTime,userCount:userCount},
        dataType:"json",
        success:function (param) {
          if(param.code==0){
            //修改成功
            alert(param.msg);
            myReload();
          }else{
            alert(param.msg);
          }
        },
        error:function(){
          alert("操作失败，请稍后重试");
        }
      });
    }

    function addCheckIn(checkInNum,roomNum,roomType,isPre,price,discountPrice,deposit,userName,telephone,arrivalTime,departTime,userCount) {
      $.ajax({
        url:"addCheckIn",//请求的后台接口
        type:"post",
        data:{checkInNum:checkInNum,roomNum:roomNum,roomType:roomType,isPre:isPre,price:price,discountPrice:discountPrice,deposit:deposit,userName:userName,telephone:telephone,arrivalTime:arrivalTime,departTime:departTime,userCount:userCount},
        dataType:"json",
        success:function (param) {
          if(param.code==0){
            //修改成功
            alert(param.msg);
            myReload();
          }else{
            alert(param.msg);
          }
        },
        error:function(){
          alert("操作失败，请稍后重试");
        }
      });
    }
  </script>
</html>
